<template>
  <div class="main">
      <router-link to="/fun" class="i1">
          <i class="fir" :style="img"></i><br>
          找攻略
      </router-link>
      <router-link to="" class="i2">
          <i class="you" :style="img"></i><br>
          看游记
      </router-link>
      <router-link to="" class="i3">
          <i class="da" :style="img"></i><br>
          问达人
      </router-link>
      <router-link to="" class="i4">
          <i class="tou" :style="img"></i><br>
          头脑学院
      </router-link>
      <router-link to="" class="i5">
          <i class="jiu" :style="img"></i><br>
          酒店
      </router-link>
      <router-link to="" class="i6">
          <i class="lv" :style="img"></i><br>
          去旅行
      </router-link>
      <router-link to="" class="i7">
          <i class="ji" :style="img"></i><br>
          机票
      </router-link>
      <router-link to="" class="i8">
          <i class="wan" :style="img"></i><br>
          当地游玩
      </router-link>
  </div>
</template>

<script>
export default {
    data() {
    return {
      img:{backgroundImage: "url(" + require("sta/nav.png") + ")"}
    }
  }
 
}
</script>

<style scoped>
    .main{
        display: flex;
        justify-content: space-between;
        padding: 0 .2rem;
        flex-wrap: wrap;
        margin-top: 0.4rem;
    }
    a{
        display: inline-block;
        height: 2.25rem;
        width: 25%;
        text-align: center;
        font-size: .35rem;
    }
    a i{
        width: 1.22rem;
        height: 1.22rem;
        display: inline-block;
        background: no-repeat;
        background-size: 5rem;
        margin-bottom: .1rem;
    }
    .fir{
        background-position: 0 0;
    }
    .you{
        background-position: 0 -1.24rem;
    }
    .da{
        background-position: -2.48rem -1.24rem;
    }
    .tou{
        background-position: -1.24rem -1.24rem;
    }
    .jiu{
        background-position: -1.24rem 0;
    }
    .lv{
        background-position: -2.48rem 0;
    }
    .ji{
        background-position: -3.72rem 0;
    }
    .wan{
        background-position: -3.72rem -1.24rem;
    }
    .i1{
        color:#ff9d00;
    }
    .i2{
        color: #feca2b;
    }
    .i3{
        color: #42d6ba;
    }
    .i4{
        color: #f94a87;
    }
    .i5{
        color: #32a2f1;
    }
    .i6{
        color: #fd4e4e;
    }
    .i7{
        color: #fd4e4e;
    }
    .i8{
        color: #b160df;
    }
</style>